<template>
	<view>
		<view class="apply_refund">
			<view class="tip">先与商家联系退款意向，能够快速解决退款问题。</view>
			<view class="form_wrap">
				<view class="flex goods">
					<image :src="getImg(infoData.imgurl)" mode="widthFix" style="width: 30%"></image>
					<view class="right">
						<text class="ellipsis2 font-28">{{infoData.goods_title}}</text>
						<text class="text-ellipsis color-999 font-24">套餐：{{infoData.setmeal_title}}</text>
						<text class="color-999 font-24">租期：{{infoData.lease_time}}</text>
						<text class="color-999 font-24">数量：x{{infoData.amount}}</text>
					</view>
				</view>
				<view class="picker_wrap">
					<view class="flex align-center row" style="display: flex;justify-content: space-between;">
						<view class="row-title">申请原因</view>
						<view class="">
							<picker @change="bindPickerChange" :value="reasonIndex" :range="reasonList">
								<view class="uni-input">{{reasonList[reasonIndex]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="price_wrap">
					<text class="font-28">申请金额</text>
					<view class="price">￥{{infoData.paid_rent}}</view>
				</view>
				<view class="state">
					<view class="flex justify-between align-center font-28 top">
						<text>申请说明</text>
						<text class="color-999">{{content.length}}/140字</text>
					</view>
					<view class="content_wrap">
						<textarea placeholder-style="color:#F76260" placeholder="必填，请详细填写申请退款说明。" maxlength=140 :value="content"
							@input="handleInput" />
					</view>
					<view class="flex align-center flex-wrap img_list">
						<block v-for="(item,index) in imgList" :key="index">
							<view class="img_wrap">
								<image :src="getImg(item)" mode="scaleToFill" style="width: 70rpx;height: 70rpx;"></image>
								<view class="del_icon" @click="delImg(index)">
									<icon type="cancel" size="20" />
								</view>
							</view>
						</block>
						<view class="img_wrap" v-if="imgList.length<5" @click="handleUpload">
							<image class="add_icon" mode="scaleToFill" src="../../static/images/img-add.png" />
							<view class="color-999 font-22">上传照片</view>
						</view>
					</view>
				</view>
				<view class="mobile">
					<text class="font-28">联系电话</text>
					<text class="font-28">{{infoData.mobile}}</text>
				</view>
				<view class="btn_wrap">
					<button class="w-100 submit_btn" type="warn" @click="submit">提交申请</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderRefundData,
		applyOrderRefund
	} from '@/api/order'
	import { uploadImg } from '@/utils/request'
	export default {
		data() {
			return {
				order_id: '',
				infoData: {},
				reasonList: ['请选择'],
				reasonIndex: 0,
				content: '',
				imgList: [],
				showReasonPicker: false
			}
		},
		onLoad(options) {
			console.log(options);
			this.order_id = options.order_id
			this.getData()
		},
		methods: {
			bindPickerChange(e) {
				let arr = []
				this.reasonIndex = e.detail.value
			},
			getImg(url) {
				return getApp().globalData.baseImg + url;
			},
			getData() {
				getOrderRefundData(this.order_id).then(res => {
					this.infoData = res || {}
					this.reasonList = res.refund_reason_list
				})
			},
			handleInput(e) {
				this.content = e.detail.value
			},
			handleUpload(){
				const that = this;
				uploadImg(function (url) {
					if (url) {
						const list = [...that.imgList];
						list.push(url);
						that.imgList=list
					}
				});
			},
			delImg(index){
				const { imgList } = this;
				let list=this.imgList
				list.splice(index, 1);
				this.imgList=list
			},
			submit() {
				const {
					order_id,
					infoData,
					reasonList,
					reasonIndex,
					content,
					imgList
				} = this;
				if (reasonIndex < 0) {
					uni.showToast({
						title: "请选择申请原因",
						icon: 'none'
					});
					return
				}
				if (!content) {
					uni.showToast({
						title: "申请说明必填",
						icon: 'none'
					});
					return
				}
				const {
					mobile: user_mobile,
					paid_rent: refund_amount
				} = infoData
				applyOrderRefund({
					order_id,
					user_mobile,
					refund_amount,
					refund_reason: reasonList[reasonIndex].value,
					refund_desc: content,
					refund_image: imgList.join(',')
				}).then(res => {
					uni.showToast({
						title: "操作成功",
						icon: 'success'
					});
					const pages = getCurrentPages();
					const beforePage = pages[pages.length - 2];
					if (beforePage.data.page) {
						beforePage.getList();
					} else {
						beforePage.getData();
					}
					my.navigateBack();
				})
			}
		}
	}
</script>

<style>
	.tip {
		padding: 0 30rpx;
		height: 75rpx;
		line-height: 75rpx;
		background: #FFF6ED;
		color: #FF9F38;
		font-size: 28rpx;
		text-align: center;
	}

	.form_wrap {
		padding: 30rpx;
	}

	.goods {
		display: flex;
		padding: 25rpx 20rpx;
		background: #FFFFFF;
		border-radius: 10px;
	}

	.goods_img {
		width: 200rpx;
		height: 200rpx;
	}

	.right {
		display: flex;
		flex-direction: column;
		padding-left: 20rpx;
		overflow: hidden;
	}

	.right text:nth-of-type(2) {
		padding-top: 6rpx;
	}

	.right text:not(:first-of-type) {
		line-height: 48rpx;
	}

	.picker_wrap {
		padding: 0 30rpx;
		margin-top: 30rpx;
		background: #FFFFFF;
		border-radius: 10px;
	}

	.price_wrap {
		padding: 30rpx 34rpx;
		margin-top: 30rpx;
		background: #FFFFFF;
		border-radius: 10px;
	}

	.price {
		margin-top: 40rpx;
		font-size: 45rpx;
		color: #F72020;
	}

	.mobile {
		padding: 30rpx;
		margin-top: 30rpx;
		background: #FFFFFF;
		border-radius: 10px;
	}

	.mobile text:last-of-type {
		padding-left: 47rpx;
	}

	.row-title {
		flex: 1;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		font-size: 28rpx;
	}

	.row-extra {
		flex-basis: initial;
		font-size: 28rpx;
		margin-right: 12px;
	}

	.row-arrow {
		width: 32rpx;
		height: 32rpx;
		margin-left: 16rpx;
	}

	.content_tip {
		font-size: 26rpx;
		color: #cccccc;
	}

	.state {
		padding: 30rpx;
		margin-top: 30rpx;
		background-color: #ffffff;
		border-radius: 10px;
	}

	.content_wrap {
		padding: 30rpx 0;
	}

	.img_wrap {
		position: relative;
		width: 145rpx;
		height: 145rpx;
		border: 1px solid #E6E6E6;
		margin-right: 20rpx;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.img_wrap:last-of-type {
		margin-right: 0;
	}

	.add_icon {
		width: 70rpx;
		height: 70rpx;
		margin-top: 20rpx;
	}

	.del_icon {
		position: absolute;
		top: -15rpx;
		right: -15rpx;
		color: #F72020;
	}

	.submit_btn {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 34rpx;
		background: #F72020;
		border-radius: 45rpx;
	}

	.btn_wrap {
		margin-top: 50rpx;
	}

	.upload_img {
		width: 145rpx;
		height: 145rpx;
	}
</style>